<template>
  <div class="ten_box">
    <m-header modile-title="练习26" go-back="true"></m-header>
    <div class="man_main">
      <div class="choice_more">
        <div class="man_main_part">
          <div class="single_li" v-for="(item, index) in detail.candadites" :key="index">
            <div class="man_li">
              <div class="man_li_left">
                <div class="option_radio">
                  <div class="radio_text">
                    <div class="man_head">
                      <img
                        :src="item.img_moblie_url"
                        mode=""></img>
                    </div>
                    <div class="man_name_num">
                      <p>{{ item.name }}</p>
                      <div class="man_num">房号:{{ item.house }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <!--选中的文案显示-->
              <div class="sign_icon" v-if="textShow(item.id, index)">{{ textShow(item.id, index) }}
              </div>
              <div class="line_msg">
                <!--<image src="../../static/image/man_jianjie@2x.png" mode=""></image>-->
                <span>简介</span>
              </div>
            </div>
            <div class="single_part">
              <div class="single_btn" v-for="(o, oindex) in item.options" :key="oindex"
                    :style="{ background: o.background }"
                    :class="{ active: checkIndexArr(item.id, index, o.id) }"
                    @click="choiceMe(item.id,item.name, o.id, o.title, index, oindex, detail.check_limit)">
                {{ o.title }}
              </div>
            </div>
          </div>
        </div>
      </div>


      <!-- 意见反馈 -->
     <!-- <div class="feed_back" >
        <div class="feed_title"><span>意见反馈</text></view>
        <div class="feed_textarea">
          <textarea value="" :show-confirm-bar="showbar" v-model="opinion" placeholder="请输入..." />
        </view>
      </view>-->
    </div>

    <!-- 按钮组 -->
    <div class="various_btns">
      <div class="btns_padding">
        <div class="btns_one">
          <div class="btn" :class="[checkIndexArr2(btn.id, btn.title) ? 'active_btn' : '']"
                @click="otherPost(btn.id, btn.title, opindex)" v-for="(btn, opindex) in detail.data"
                :key="opindex">{{ btn.title }}</div>
        </div>
        <div class="btns_two" :class="{ disabled: dis }" @click="finishVote">确认投票</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .ten_box {
    padding-top: 60px;
    background: #F3F5FD;
    min-height: 100vh;
    .man_main {
      padding: 20px;
      position: relative;
      .choice_more {
        padding-bottom: 30%;
        .man_main_part {
          border-radius: 10px;
          // padding: 20rpx;
          border: 1px solid #F3F5FD;

          .single_li {
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
            margin-bottom: 20px;
            padding: 0 10px;
            background: #FFFFFF;

            .man_li {
              margin-bottom: 40px;
              width: 100%;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #F3F3F3;
              position: relative;

              .man_li_left {
                width: 80%;

                .option_radio {
                  width: 90%;
                  // border: 1rpx solid #E5E5E5;
                  display: inline-flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 10px 20px;
                  margin-bottom: 10px;
                  border-radius: 10px;

                  .radio_text {
                    width: 75%;
                    font-size: 18px;
                    color: #333333;
                    display: inline-flex;
                    align-items: center;

                    .man_head {
                      margin-right: 10px;

                      img {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                      }
                    }

                    .man_name_num {
                      .man_num {
                        // color: #999999;
                        font-size: 15px;
                        font-weight: lighter;
                        margin-top: 10px;
                      }
                    }
                  }

                  .kuang {
                    width: 40px;
                    height: 40px;
                    border: 1px solid #E5E5E5;
                  }
                }

                .actives {
                  background: #EEF6FF;
                  border: 1px solid #AFCEF1;

                  .radio_text {
                    color: #3780C8
                  }

                  .kuang {
                    width: 40px;
                    height: 40px;
                    background: #3780C7;
                    position: relative;
                  }

                  .kuang:after {
                    content: "";
                    position: absolute;
                    left: 7px;
                    top: 6px;
                    width: 25px;
                    height: 15px;
                    border: 7px solid #ffffff;
                    border-radius: 1px;
                    border-top: none;
                    border-right: none;
                    background: transparent;
                    transform: rotate(-45deg);
                  }
                }
              }

              .sign_icon {
                position: absolute;
                z-index: 2;
                top: 25%;
                left: 25%;
                width: 250px;
                height: 80px;
                border: 5px solid #FF6F5E;
                border-radius: 10px;
                transform: rotate(-15deg);
                color: #FF6F5E;
                font-size: 40px;
                letter-spacing: 2px;
                text-align: center;
                font-weight: bold;
                background: rgba(255, 111, 94, .2);
                line-height: 80px;
              }

              .line_msg {
                display: flex;
                align-items: center;
                margin-left: 20px;

                img {
                  width: 38px;
                  height: 38px;
                  margin-right: 10px;
                }

                span {
                  font-size: 16px;
                  color: #FFA233;
                }
              }
            }

            .single_part {
              display: flex;
              width: 100%;
              flex-wrap: wrap;
              justify-content: space-between;

              .single_btn {
                width: 23%;
                padding: 10px 0;
                // border: 1rpx solid #666666;
                // color: #666666;
                color: #FFFFFF;
                border-radius: 10px;
                font-size: 16px;
                text-align: center;
                margin-bottom: 20px;
              }

              .active {
                color: red;
              }
            }
          }

          .btn_arr {
            border-top: 1px solid #F3F3F3;
            display: inline-flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            padding-top: 20px;
            margin-top: 20px;

            .option_btn {
              width: 24%;
              padding: 20px 0;
              color: #333333;
              border: 1px solid #333333;
              border-radius: 10px;
              font-size: 28px;
              text-align: center;
            }

            .active {
              color: red;
            }
          }
        }
      }

      .feed_back {
        width: 100%;
        border: 1px solid #F3F5FD;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
        margin-top: 25px;
        background: #FFFFFF;

        .feed_title {
          border-bottom: 1px solid #F3F3F3;
          padding: 20px 20px;

          span {
            font-size: 33px;
            color: #333333;
          }
        }

        .feed_textarea {
          padding: 20px;

          textarea {
            width: 94%;
            height: 200px;
            background: #F5F5F5;
            border-radius: 5px;
            color: #999999;
            padding: 20px;
            font-size: 30px;
          }
        }
      }
    }

    .various_btns {
      position: fixed;
      bottom: 0;
      width: 100%;
      /*padding-bottom: 5%;*/
      background: #F3F5FD;
      z-index: 2;

      .btns_padding {
        padding: 10px;

        .btns_one {
          width: 100%;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;

          // flex-wrap: wrap;
          .btn {
            width: 25%;
            border: 1px solid #666666;
            color: #666666;
            font-size: 18px;
            letter-spacing: 5px;
            border-radius: 10px;
            padding: 10px 0;
            text-align: center;
          }

          .active_btn {
            border: 1px solid #FFA233;
            color: #FFFFFF;
            background-color: #FFA233;
          }
        }

        .btns_two {
          width: 100%;
          border-radius: 10px;
          background: #FFA233;
          color: #FFFFFF;
          font-size: 18px;
          letter-spacing: 5px;
          padding: 20px 0;
          margin-top: 10px;
          text-align: center;

          &.disabled {
            background: #999999;
          }
        }
      }

    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import {MessageBox} from 'mint-ui'
  export default {
    data() {
      return {
        detail: {
          candadites: [
            {
              candidate_id: 1597,
              house: '102',
              id: 43,
              img_moblie_url: 'https://npic.zgwyzxw.cn/article%2Fthumb%2F20220727165705_676190_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220616141851.png',
              name: '李四',
              options: [
                {
                  background: "#397CBD",
                  id: "50",
                  title: "同意"
                },
                {
                  background: "#FFBD72",
                  id: "51",
                  title: "反对"
                },
                {
                  background: "#98B0C7",
                  id: "52",
                  title: "弃权"
                }
              ]
            },
            {
              candidate_id: 1596,
              house: '101',
              id: 44,
              img_moblie_url: 'https://npic.zgwyzxw.cn/article%2Fthumb%2F20220727165705_676190_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220616141851.png',
              name: '张三',
              options: [
                {
                  background: "#397CBD",
                  id: "50",
                  title: "同意"
                },
                {
                  background: "#FFBD72",
                  id: "51",
                  title: "反对"
                },
                {
                  background: "#98B0C7",
                  id: "52",
                  title: "弃权"
                }
              ]
            },
            {
              candidate_id: 1598,
              house: '103',
              id: 45,
              img_moblie_url: 'https://npic.zgwyzxw.cn/article%2Fthumb%2F20220727165705_676190_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220616141851.png',
              name: '王五',
              options: [
                {
                  background: "#397CBD",
                  id: "50",
                  title: "同意"
                },
                {
                  background: "#FFBD72",
                  id: "51",
                  title: "反对"
                },
                {
                  background: "#98B0C7",
                  id: "52",
                  title: "弃权"
                }
              ]
            },
            {
              candidate_id: 1599,
              house: '104',
              id: 46,
              img_moblie_url: 'https://npic.zgwyzxw.cn/article%2Fthumb%2F20220727165705_676190_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220616141851.png',
              name: '赵六',
              options: [
                {
                  background: "#397CBD",
                  id: "50",
                  title: "同意"
                },
                {
                  background: "#FFBD72",
                  id: "51",
                  title: "反对"
                },
                {
                  background: "#98B0C7",
                  id: "52",
                  title: "弃权"
                }
              ]
            }
          ],
          data: [
            {
              id: "5",
              title: "随多数"
            },
            {
              id: "17",
              title: "弃权"
            }
          ],
          id: 51,
          check_limit: 3
        },
        selectData: [], // 存放选择结果
        activeBtn: -1, // 存放其它三个特殊按钮的选中状态
        opinion: '', // 意见收集
        showbar: false, // 键盘上方是否显示完成一栏
        mask: false, // 遮罩层
        commonSelect: {}, // 存放公共选项文案
        dis: false, // 防止按钮重复点击（false:可点击  true：不可点击）
        timer: null
      }
    },
    methods: {
      //  点击样式
      checkIndexArr(sid, index, q1) {
        const emptyArr = this.selectData[index] || {}
        const checkArr = emptyArr[sid]
        if (!checkArr) return false;
        return checkArr[2] === q1
      },
      //  获取值
      choiceMe(sid, name, id, option, index, index2, limit) {
        const maxLen = limit; // 几选几限制数
        const useSelect = {
          ...this.selectData[index]
        }

        const useAgree = this.selectData.filter((item) => {
          return Object.values(item)[0][4] === 0;
        })
        if (index2 === 0 && maxLen <= useAgree.length) {
          MessageBox({
            title: '提示',
            message: `最多选择${maxLen}项`,
            showCancelButton: true
          })
          return false;
        }
        this.commonSelect = {};
        useSelect[sid] = [
          sid,
          name,
          id,
          option,
          index2
        ]
        this.$set(this.selectData, index, useSelect)
        this.type = 'candidate'
      },
      //  红色印章
      textShow(sid, index) {
        const useShow = this.selectData[index] || {}
        const selectUse = useShow[sid]
        // console.log(selectUse)
        if (!selectUse) return false;
        return selectUse[3] || '' // 因为数据结构为[sid,name,id,option] option为选项文案
      },



      // 特殊按钮点击样式
      checkIndexArr2(id, text) {
        return this.commonSelect.text === text;
      },

      // 特殊按钮事件
      otherPost(id, text) {
        const that = this;
        MessageBox.confirm('Are you sure?').then(action => {
          // 如果数组里没有值，则里面的数据格式为空
          that.commonSelect = {
            id,
            text
          };
          // console.log(that.commonSelect)
          that.selectData = [];
          that.type = 'option'
          // console.log(that.specialArr)
        })

      },
      finishVote() {
        const comSelect = this.commonSelect
        let lastData = null
        if (comSelect.id) {
          // lastData = [comSelect]
          lastData = [
            [
              comSelect.id,
              comSelect.text
            ]
          ]
        } else {
          lastData = this.selectData
        }
        console.log(lastData)
      }
    },
    components: {
      mHeader
    }
  }
</script>
